<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id='app'>
        
        <!-- textarea -->
        <p style="white-space: pre-line;">{{ message }}</p>
        <br />
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
        <hr>

        <!-- checkbox -->
        <input type="checkbox" id="checkbox" v-model="checked" />
        <label for="checkbox">{{ checked }}</label>
        <hr>

        <!-- 复选框组 -->
        <div id="v-model-multiple-checkboxes">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
            <label for="jack">Jack</label>

            <input type="checkbox" id="john" value="John" v-model="checkedNames" />
            <label for="john">John</label>

            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
            <label for="mike">Mike</label>
            <br />
            <span>Checked names: {{ checkedNames }}</span>
        </div>
        <hr>

        <!-- 单选按钮组 -->
        <div id="v-model-radiobutton">
            <input type="radio" id="one" value="One" v-model="picked" />
            <label for="one">One</label>
            <br />

            <input type="radio" id="two" value="Two" v-model="picked" />
            <label for="two">Two</label>
            <br />
            <span>Picked: {{ picked }}</span>
        </div>
        <hr>

        <!-- 下拉框 -->
        <div id="v-model-select-dynamic" class="demo">
            <select v-model="selected">
                <option v-for="option in options" :value="option.value">
                    {{ option.text }}
                </option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: "yoursister",
                    checked: false,
                    checkedNames: [],
                    picked: '',
                    selected: 'A',
                    options: [
                        { text: 'One', value: 'A' },
                        { text: 'Two', value: 'B' },
                        { text: 'Three', value: 'C' }
                    ]
                }
            }
        })
        const vm = app.mount('#app')
    </script>
</body>

</html>